<template>
    <div>
        <panle content="助教二维码" title='预分配助教的二维码'></panle>
        <div class="searchbar">
            <el-row class="pt20">
                <el-col :span="12">
                    <el-button size="mini" @click="init()">刷新</el-button>
                    <pers-button icon="el-icon-edit" label="添加" perms="looseCode:group:set" size="mini" type="primary" @click="add()"></pers-button>
                    <pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="looseCode:group:batch_del" label="批量删除"></pers-button>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">

                        <el-form-item label="">
                            <el-input v-model="formInline.name" size="mini" placeholder="请输入助教名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" size="mini" @click="serach">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table v-loading="loading" :data="tableData" border default-expand-all row-key="id" stripe
                  style="width: 100%;margin-bottom: 20px;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>1
            <el-table-column label="ID" prop="id" width="55"></el-table-column>
            <el-table-column label="分组名称" prop="name"></el-table-column>
            <el-table-column label="分配规则" prop="rule">
                <template slot-scope="scope">
                    <el-select size="mini" v-model="scope.row.rule">
                        <el-option
                            v-for="item in platformSelection"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="人数" prop="cnt"></el-table-column>

            <el-table-column v-if="isShow(['looseCode:group:set','looseCode:group:del'])" label="操作" prop="id">
                <template slot-scope="scope">
                    <PersButton icon="fa fa-pencil" label="编辑" perms="looseCode:group:set" size="mini" type="text"
                                @click="edit(scope.row)"></PersButton>
                    <PersButton icon="el-icon-delete" label="删除" perms="looseCode:group:del" size="mini" type="text"
                                @click="del(scope.row)"></PersButton>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">

            <el-pagination :current-page="pageNumber" :page-size="pageSize"
                           :page-sizes="[10, 50, 100, 200]"
                           :total="total" background layout="total, sizes, prev, pager, next, jumper"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange">
            </el-pagination>
        </div>

        <el-dialog :title="!form.id ? '新增分组' : '修改分组'" :visible.sync="open" append-to-body width="400px">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>

                    <el-col :span="24">
                        <el-form-item label="分组名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入分组名称" size="small"/>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="分配规则" prop="rule">
                            <el-select size="mini" v-model="form.rule">
                                <el-option
                                    v-for="item in platformSelection"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="open = false">取 消</el-button>
                <el-button size="small" type="primary"
                           @click="!form.id ? submitForm('form') : subEditForm('form') ">确 定
                </el-button>
            </div>

        </el-dialog>


    </div>
</template>

<script>
import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {setGroup, delGroup, getGroupList, getSelectPlatform} from '@/api/scrm/looseCode/looseCode';
import {hasPermission, isShow} from '@/common/permission';

export default {
    components: {
        Panle,
        PersButton
    },
    data() {
        return {
            loading: false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            tableData: [],
            serachword: '',
            formInline: {},
            open: false,
            form: {
                id: '',
                name: '',
                rule: 0
            },
            rules: {
                name: [{
                    required: true,
                    message: "分组名称不能为空",
                    trigger: "blur"
                }],
                rule: [{
                    required: true,
                    message: "分配规则不能为空",
                    trigger: "blur"
                }]
            },
            props: {
                // 配置项（必选）
                value: "id",
                label: "name",
                children: "children"

            },
            platformSelection: [
                {
                    label: '轮询',
                    value: 0
                },
                {
                    label: '权重',
                    value: 1
                },
                {
                    label: '正序',
                    value: 2
                },
                {
                    label: '倒序',
                    value: 3
                },
            ],
            tabSelection: [],
            multipleSelection: []
        }
    },
    created() {
        this.init();
    },
    methods: {
        hasPermission,
        isShow,
        init: function () {
            this.loading = true;
            let param = {
                "pageSize": this.pageSize,
                "pageNumber": this.pageNumber
            }
            if (this.serachword) {
                param.map = {
                    name: this.serachword
                }
            }
            getGroupList(param).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                    this.loading = false;
                }
            })


        },
        serach: function () {
            this.serachword = this.formInline.name;
            this.init();
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageNumber = e;
            this.init();
        },
        handleSelectionChange: function (e) {
            console.log(e);
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.role_id)

            }
            this.multipleSelection = selectChang;
            console.log(selectChang);
        },
        add: function () {
            this.form = {
                id: '',
                name: '',
                rule: 0
            };
            this.open = true;
        },
        submitForm: function (data) {
            this.$refs[data].validate((valid) => {
                if (valid) {
                    setGroup(this.form).then((res) => {
                        console.log(res)
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open = false;
                        } else {
                            this.msgError(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            })
        },
        del: function (data) {
            this.$confirm('确定删除【' + data.name + '】此分组', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                if (data.c)

                delGroup({
                    id: data.id
                }).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init();
                    } else {
                        this.msgError(res.msg);
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        edit: function (data) {
            let editForm ={
                id: data.id,
                name: data.name,
                rule: data.rule
            }
            Object.assign(this.form,editForm);
            this.open = true;
        },
        subEditForm: function (data) {

            this.$refs[data].validate((valid) => {
                if (valid) {
                    setGroup(this.form).then((res) => {
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open = false;

                        } else {
                            this.msgError(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            })

        },
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.demo-form-inline {
    .el-form-item {
        margin-bottom: 0;
    }
}

.el-tree {
    max-height: 200px;
    overflow: auto;
    background: #f7f7f7;
}

.el-tree-node__label,
.el-textarea__inner {
    font-size: 12px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
    float: left;
    width: 100px;
}

.el-checkbox__label {
    font-size: 12px !important;
}

</style>
